WebXR模拟器是啥？来看看 Meta 新出 WebXR模拟器 immersive-web-emulator
近日，Meta推出了通过WebXR开发的沉浸式VR花园建筑应用程序 Project Flowerbed，并开源了项目内容。据官网文章所述，他们希望通过 Project Flowerbed 来展示quest高质量的WebXR体验，且通过开源帮助其他开发人员可以更轻松地了解meta团队开发流的架构、资产管线和游戏机制[1]。
巧的是，Meta于上月发布了新的WebXR模拟器 immersive-web-emulator[2]，immersive-web-emulator 可以帮助开发人员于浏览器上模拟 Meta Quest 设备运行 WebXR 应用程序，而无需佩戴头显。作为一个新兴的搭载于浏览器上的应用扩展，immersive-web-emulator拥有轻量化以及便捷性等特点。
immersive-web-emulator 项目地址：https://github.com/meta-quest/immersive-web-emulator
Project Flowerbed 体验地址：https://flowerbed.metademolab.com/
文章将由以下几部分构成：
1. WebXR是什么？为什么要用WebXR模拟器？
2. 如何使用Meta WebXR模拟器 immersive-web-emulator ？
3. 相较于旧版WebXR模拟器 WebXR-emulator-extension，Meta新出的 immersive-web-emulator 有哪些升级 ？
4. 使用 immersive-web-emulator 在 Project Flowerbed 中的游玩体验如何？
5. 总结：个人对于WebXR模拟器的拙见
1. WebXR是什么？为什么要用WebXR模拟器？
WebXR，全称 WebXR Device API，WebXR Device API和其他相关API是由 W3C、Immersive Web Community Group等组织定义的一种技术标准[3]，组织的目标是通过API将高性能的虚拟现实（VR）和增强现实（AR）（统称为XR）引入开放式Web，以便与Web中的传感器和XR设备进行交互[4]。
WebXR游戏应用一般作为网页的形式呈现，这就代表着用户可以随时随地直接打开由头显自带的浏览器进行WebXR的游玩，就像手机端中的“云游戏”一样。WebXR不仅突破了不同头显平台之间的限制，同时还免去了下载游戏应用所耗费的下载时间和内存空间占用。
因为技术力及XR生态发展的限制，就如同大众所了解到的，目前所有的XR开发工作都还是基于电脑屏幕来完成实现。在传统的WebXR开发流程中，开发人员需要反复地摘下与佩戴头显来观察与调试开发中的WebXR应用程序，这是十分繁琐且影响开发效率的。
基于此等情况，Mozilla开发了搭载于浏览器上的模拟器扩展包，其可以直接模拟多种VR设备，帮助开发者在浏览器上更加轻松地观测自己的WebXR应用。
2. 如何使用Meta WebXR模拟器 immersive-web-emulator ？
安装：于浏览器扩展程序商店中下载
Chrome浏览器：https://chrome.google.com/webstore/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik
Microsoft Edge浏览器：https://microsoftedge.microsoft.com/addons/detail/immersive-web-emulator/hhlkbhldhffpeibcfggfndbkfohndamj
使用：F12打开浏览器开发人员工具面板——选择WebXR模块
3. 相较于旧版WebXR模拟器 WebXR-emulator-extension，Meta新出的 immersive-web-emulator 有哪些升级 ？
如下图所示，左侧为最后更新于2020年的Mozilla公司所属WebXR模拟器 WebXR-emulator-extension（以下简称 Mozilla模拟器），右侧为Meta这次新出的WebXR模拟器 immersive-web-emulator（以下简称 Meta模拟器）。
前文提到，在WebXR的历史上，基本上是Mozilla最先开始着手于WebVR，在Meta模拟器的项目文档中也提到，本次新的Meta模拟器受到前者的启发，重新构建了模拟器的构成，增加了具体的头显型号模拟，进行了更加系统的功能和交互界面设计。
1. 在用户使用界面上：相较于Mozilla模拟器，Meta模拟器具有更加明晰的UI设计以及更加齐全的控制器操作功能模拟。
2. 在操作模拟上：Mozilla模拟器仅能模拟扳机键及抓握键，而不支持其他按键模拟。Meta模拟器则包含了所有按键，且使用按键时，画面中的手柄按键也会伴随指令活动。
3. 在功能性上：Meta模拟器增加了许多新兴而实用的功能，如键盘输入镜像、空间模拟参考等等。
初步体验下来，可以看到Meta模拟器的UI设计非常清晰明了，左上角排布着各部件的空间位置信息，下方则设置左右手柄按键模拟的交互组件，基本可以说是“所见即所得”，只是观察UI图标就可知道各个交互按钮所对应手柄的功能。
其中比较惊喜的功能是Meta新增的键盘输入映射功能，即可以通过键盘敲击快捷键直接模拟手柄，而非像之前模拟器那样全部需要通过鼠标点击操作。这样对于想要流畅测试WebXR的开发者而言是非常提升使用体验的操作。
图片源于Meta官方文章：https://developer.oculus.com/blog/webxr-development-immersive-web-emulator/
但同样，Meta模拟器也有比较不够人性化的地方。如下图所示，在模拟器中移动手柄和头显的位置与角度不能同时进行，需要重复点击物体中心切换模式。这就导致如果没有切换为静止模式（姑且这么称呼），画面中各物件的位置信息都是由彩色的标识展现，整体观感略显杂乱。
个人认为，或许将模拟物件的空间交互方式稍微调整一下会更好，就如同3D建模软件一样，物体的移动轴旋转轴将同时存在，均呈半透明灰色，移动到需要使用的操作轴时，其对应的操作轴变亮；点击物体操作轴出现，鼠标点击空白区域操作轴隐藏等等。如此，模拟器的整体操作调整以及观感可能会更加舒适。
4. 使用 immersive-web-emulator 在 Project Flowerbed 中的游玩体验如何？
以下便是笔者使用immersive-web-emulator游玩Project Flowerbed的大致体验流程，可以观察到在游玩视频的整体占比中，调整头显方位以及调整手柄指针角度方向的时间占据了绝大部分，个人感觉手柄指针方位调节对三维空间感知能力较弱的用户可能不太友好。在模拟手柄交互方面，本次主要使用键盘映射来进行手柄按键交互的操作模拟。可以观察到，在按键模拟的过程中，键盘映射的交互体验丝滑而流畅。
5. 总结：个人对于WebXR模拟器的拙见
综上所述，相信大家可以观察到，WebXR模拟器并不适合用于直接游玩，其功能架构的设计更像是针对XR设计师以及WebXR开发人员人群服务的。
个人认为WebXR模拟器的价值主要体现于以下两个方面。一是便利性，就如同上文所说，在传统的WebXR开发流程中，开发人员需要反复地摘下与佩戴头显来观察与调试，而模拟器可以在浏览器上直接预览。二是可交流性，由于头显设备特有的隐私性，在不进行额外屏幕连接的情况下，头显内的内容仅能由佩戴者本人所观测。这对于想要独享XR体验的消费者可能是福音，但对需要协同合作的项目团队而言却不太友好。于上述两个职业而言，工作流程中的展示、测试与交流相辅相成，密不可分，一个能够方便预览项目运行状态并进行调试的小工具对二者是个难得的好助手。
WebXR因其出色便捷性将会是未来XR内容发展的趋势之一。在3D空间构建3D内容的时代来临之前，WebXR模拟器会是WebXR开发领域不可或缺的一部分，目前的模拟器主要还是适用于VR领域，相信各大厂商也将会继续拓宽模拟器的实际使用功能，推动VR、AR、MR继续融合，培养出一个适用范围更广、功能更加完善、操作更加便捷的XR好助手。
参考资料：
[1] Meta：https://developer.oculus.com/blog/project-flowerbed-a-webxr-case-study/
[2] Meta：https://developer.oculus.com/blog/webxr-development-immersive-web-emulator/
[3] 维基百科：https://en.wikipedia.org/wiki/WebXR
[4] 知乎：https://zhuanlan.zhihu.com/p/158904512